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Eternal gratitude to Kevin Hughes, kevinh@pulua.hcc.hawaii.edu, for his code to find intersections of 
points with circles and polygons. 

This document is a step-by-step tutorial for designing and serving graphical maps of information 
resources with either the external imagemap CGI script or with the built in imagemap support in NCSA 
HTTPd 1.5. Through such a map, users can be provided with a graphical overview of any set of 
information resources; by clicking on different parts of the overview image, they can transparently 
access any of the information resources (possibly spread out all across the Internet). 

• Requirements 

• Compiling the Imagemap Scrip t 

• Your First Imagemap 

• Internal Imagemap Support 

• A Complete Example 

• Real- World Examples 

Note: Certain newer browsers support Client Side Imagemaps. For more information on Client Side 
Imagemaps, check out the Spyglass tutorial . 



Requirements 

This tutorial assumes use of NCSA HTTPd version 1.0a5 or later. To use the internal imagemap support, 
you need NCSA HTTPd 1.5. Some other servers (e.g. Plexus, Apache, Netsite) can also serve 
imagemaps, in server-specific ways; see the specific server's docs for more information. 

^* Make sure you have a working NCSA HTTPd server installed and running. 

This tutorial also assumes use of a browser that supports inlined images, server side imagemapping and 
HTTP/1.0 URL Redirection. 



Compiling the Imagemap Script 

If you downloaded or pre-compiled NCSA HTTPd server, or compiled your own, chances are the 
imagemap program was automatically compiled and added to your cgi-bin directory. If so, you can skip 
this step. If not, you can download the current imagemap.c from here . 

Compile the imagemap script by first changing into your ServerRoot directory, and then into the cgi-src 
subdirectory. Put the new imagemap.c source in place of the old one (if you have the old version of 
imagemap.c) and then, type make imagemap and you should be all set. 
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Your First Imagemap 

In this section we walk through the steps needed to get an initial image map up and running. 
First: create an image. 

There are a number of image creation and editing programs that will work nicely - the one I use is 
called xpaint (I don't know where its home page is anymore). You can get it here. It's for UNIX systems 
running an X interface. 

™^ Second: create an imagemap map file. 

This file maps regions to URLs for the given image. For a list of tools that may help you create a map 
file, see Yah oo's Imagemap Directo ry. For instance, there is a program called mapedi t that you could 
use. 

A common scheme for an imagemap is a collection of points, polygons, rectangles and circles, each 
containing a short text description of some piece of information or some information server; 
interconnections are conveyed through lines or arcs. Try to keep the individual items in the map spaced 
out far enough so a user will clearly know what he or she is clicking on. 

Lines beginning with # are comments. Every other non-blank line consists of the following: 

method URL coordl coord2 . . . coordn 

method is one of the following: 

default - For the default URL 

Coordinates: none 
circle - For a circle 

Coordinates: center edgepoint 

poly - For a polygon of at most 100 vertices 

Coordinates: Each coordinate is a vertex, 
rect - For a rectangle 

Coordinates: upper-left lower-right 

point - For closest to a point 
Coordinate: thePoint 
URL is one of the following: 
A Local URL 

ex. /docs/tutorials 
A Full URL 

ex. http ; / / www . yahoo . com/ 

coord# 

Each coord entry is a coordinate, format x,y. The number depends on the method. 

. Notes: 

• each method is evaluated in the order it is placed in the configuration file. If you have overlapping 
areas, such as a circle inside of a rectangle, you should place whichever one you want evaluated 
first before the other in the map file. In this case, we would put the circle before the rectangle. 
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• Also note that it does not make sense to use the default method with the point method because if 
even one point method is specified, anywhere you click will be considered close to the point and 
the URL specified by point will be serviced. 

• If you will be serving access authentication -protected documents through your imagemap, you 
MUST use fully qualified URLs, for example 

http : / / your . server . com/path/to/protected/file . html 
otherwise access will be denied. 
Here is an example imagemap linked from the Mosaic Demo page. Here is what a map file looks like: 



default /Xll/mosaic/public/none . html 

rect http://cui_www.unige.ch/w3catalog 15,8 135,39 

rect gopher://rs5.loc.gov/ll/global 245,86 504,143 

rect http://nearnet.gnn.com/GNN-ORA.html 117,122 175,158 



1 El 

The format is fairly straightforward. The first line specifies the default response (the file to be returned if 
the region of the image in which the user clicks doesn't correspond to anything). 

Subsequent lines specify rectangles in the image that correspond to arbitrary URLs -- for the first of 
these lines, the rectangle specified by 1 5 , 8 (x , y of the upper-left corner, in pixels) and 1 3 5 , 3 9 (lower- 
right Corner) Corresponds to URL http : //cui^www. unige . ch/w3catalog. 

So, what you need to do is find the upper-left and lower-right corners of a rectangle for each information 
resource in your image map. A good tool to use on UNIX for this is xv (also on ftp.x.org in /contrib ^ - 
pop up the Info window and draw rectangles over the image with the middle mouse button. 

It doesn't matter what you name your map file, but it does matter where you put it! Specifically, you 
cannot have your mapfile reside in the in the top-level of the DocumentRoot . because the imagemap ' 
CGI program will not see a 7" in the extra path_info that you are referencing. If this doesn't make 
sense to you, then just trust me: place your map file in a subdirectory. 

Third: referencing your imagemap in your HTML file. 

To reference your new map, you construct URLs pointing to it. 

For example, if your username is newbie and you have created a sample . map file in the directory called 
f oo in your public html home directory, and used the image sample . gif for the map, the following 
line of HTML will reference it: 



s 
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<A HREF="http: //www. school . edu/cgi~bin/imagemap/~newbie/f oo/sample ,map"> 

<IMG SRC="/~newbie/gifs/sample.gif " ISMAP> 

</A> 

| I P 1 | 

The extra path_info after the /cgi-bin/imagemap tells the imagemap program where to find your map 
file. You'll note that it is possible to request the map file itself by simply requesting: 

http : //www . school . edu/~newbie/f oo/sample . map 

Or, using the internal imagemap support of NCSA HTTPd 1.5: 



<A HREF="http: / /www. school. edu/~newbie/foo/sample.map"> 

<IMG SRC="/~newbie/gifs/sample.gif " ISMAP> 

</A> 



■™*" Fourth: Try it out! 

Load the HTML file, look at the inlined image, click somewhere, and see what happens. 



Internal Imagemap Support 

With NCSA HTTPd 1 .5, the server can now handle imagemap queries without launching the external 
imagemap script. This provides for a faster mechanism and decreased server load. 

In order to enable the internal imagemap code, the server must be compiled with imagemap support 
defined. This is the default. Also, you need to add the magic mime type for the imagemap files in much 
the same way you would for CGI scripts : 

Ad dType text /x- imagemap .map 

Then, you can reference the map file . directly in your HTML instead of through the imagemap script, ie: 



is i 

<A HREF="http: //www. school . edu/~newbie/f oo/sample. map" > 

<IMG SRC="/~newbie/gifs/sample.gif " ISMAP> 

</A> 
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A Complete Example 

The fish demo in another section of this manual used the following configuration files: 
Map Configuration File 

The map conf igu ration file used for this picture was rather lengthy. I used xv to get the coordinates. 
Reference the map in HTML document: 

<A HREF="/cgi-bin/imagemap/docs/info/fish.map"><IMG SRC=" f ish33 . gif " ISMAP> <A> 



Real-World Examples 

Following are examples of distributed imagemaps on servers in the real world; they may or may not 
work at any point in time. 

• Ex perimental Internet Resources Metamap at NCSA . 

• University of California Museum of Paleontology . 

• National Institute of Standards and Technolog y. 

• Server map at NCHPC Information Server . 



For More Information 



For more information, see the NCSA HTTPd documentation . 




Return to the tutorial index 



Return to administration overview 



NCSA HTTPd Development Team / htt pd(a)ncsa.uiuc.edu / 11-5-95 
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UMhn A s have one very important property: the object a method is invoked 
Me *^becomes the value of the thi s keyword within the body of the method. 
* I °2!niple ) when we invoke o.raO, the body of the method can refer to the 
^ o with' the th i s keyword. 

The discussion of the thi s keyword should begin to make it clear why we use 
methods at all. Any function that is used as a method is effectively passed an extra 
argument— the object through which if is invoked. Typically, a method performs 
some sort of operation on that object, so the method invocation syntax is a partic- 
ularly elegant way to express the fact that a function is operating on an object. 
Compare the following two lines of code: 

rect.setSize(x, y); 
setRectSizetrect, x, y); 

The two lines may perform exactly the same operation oWthe object rect, but the 
method invocation syntax shown first more clearly indicates the idea that it is the 
object rect that is the primary focus, or target, of the operation. (If the first line 
does not seem a more natural syntax to you, you are probably new to object-ori- 
ented programming. With a little experience, you will learn to love it!) 

While it is useful to think of functions and methods differently, there is not actu- 
ally as much difference between them as there initially appears to be. Recall that 
functions are values stored in variables and that variables are nothing more than 
properties of a global object. Thus, when you invoke a function, you are actually 
invoking a method of the global object. Within such a function, the this keyword 
refers to the global object. Thus, there is no technical difference between functions 
and methods. The real difference lies in design and intent: methods are written to 
operate somehow on the this object, while functions usually stand alone and do 
not use the thi s object. 

The typical usage of methods is more clearly illustrated through an example. 
Example 8-2 returns to the Rectangle objects of Example 8-1 and shows how a 
method that operates on Rectangle objects can be defined and invoked. 

Example 8-2: Defining and Invoking a Method 

I! This function uses the this keyword, so it doesn't make sense to 
// invoke it by itself; it needs instead to be made a method of some 
// object that has "width 1 ' and "height" properties defined, 
function compute_a rea () 



'/ Create a new Rectangle object, usir^ the constructor defined earlier, 
var page = new Rectangle(8. 5, 11); 
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Example 8-2: Defining and Invoking a Method (continued) 

I! Define a method by assigning the function to a property of the object, 
page. area = compute_a rea ; 

// Invoke the new method like this: 

var a = page.areaO; // a = 8.5*11 = 93.5 

There is a shortcoming that is evident in Example 8-2: before you can invoke the 
area( ) method for the rect object, you must assign that method to a property of 
the object. While we can invoke the areaO method on the particular object 
named page, we can't invoke it on any other Rectangle objects without first 
assigning the method to them. This quickly becomes tedious. Example 8-3 defines 
some additional Rectangle methods and shows how they can automatically be 
assigned to all Rectangle objects with a constructor function. 
Example 8-3: Defining Methods in a Constructor 

II First, define some functions that will be used as methods, 
function Rectangl e_area C ) ( return this. width * this. height; } 
function Rectangl e_peri meter ( ) { return 2*this. width + Z*thi s . hei ght ; } 
function Rectangl e_set_size(w,h> { this. width = w; this. height = h. : } 
function Rectangle_en1 arge( ) {. thi s .width *= 2; this. height *= 2; } 
function Rectangle_shrink( ) { this.width /= 2; this. height /= 2; } 

// Then define a constructor method for our Rectangle objects. 

// Tbe constructor initializes properties and also assigns methods. 

function Rectangle(w, h) 

{ 

// Initialize object properties, 
this.width = w; 
' this. height = h; 

// Define methods for the object, 
this. area = Rectangl e_arefe; 
this. perimeter = Rectangie_perimeter; 
this,set„size = Rectangl e_set_size; 
this. enlarge = Rectangle_enlarge; 
this. shrink = Rectangle_shrink; 

} 

// Now, when we create a rectangle, we can immediately invoke methods on it: 

var r = new Rectangle<2,2) ; 

var a = r.areaO; 

r.eniargeO; 

var p = r. perimeter! ) ; 
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The technique shown in Example 8-3 also has a shortcoming. In this example, the 
Rectangl e( ) constructor sets seven properties of each and every Rectangle object 
it initializes, even though five of those properties have constant values that are the 
same for every rectangle. Each property takes up memory space; by adding meth- 
ods to our Rectangle class, we've more than tripled the memory requirements of 
each Rectangle object. Fortunately, JavaScript 1.1 introduced a solution to this 
problem: it allowed an object to inherit properties from a prototype object. The 
next section describes this technique in detail. 

8.4 Prototypes and Inheritance 

We've seen how inefficient it can be to use a constructor to assign methods to the 
objects it initializes. When we do this, each and every object in the class has iden- 
tical copies of the same method properties. In JavaScript 1,1 and later, there is a 
much more efficient way to specify methods, constants, and other properties that 
are shared by all objects in a class. 

JavaScript 1.1 introduced the notion of a prototype object Every object has a proto- 
type; an object inherits all of the properties of its prototype. This means that all of 
the properties of the prototype object appear to be properties of the objects that 
inherit them. To specify the prototype object for a class of objects, we set the 
value of the prototype property of the constructor function to the appropriate 
object. Then, when a new object is initialized with the constructor, JavaScript auto- 
matically uses the specified object as the prototype for the newly created object. 
A constructor defines a class of objects and initializes properties, such as width 
and height, that are the state variables for the class. The prototype object is asso- 
ciated with the constructor, so each member of the class inherits exactly the same 
set of properties from the prototype. This means that the prototype object is an 
ideal place for methods and other constant properties. 

Note that inheritance occurs automatically as part of the process of looking up a 
property value. Properties are not copied from the prototype object into new 
objects; they merely appear as if they were properties of those objects. This has 
two important implications. First, the use of prototype objects can dramatically 
decrease the amount of memory required by each object, since it can inherit many 
of its properties. The second implication is that an object inherits properties even 
if they are added to its prototype after the object is created. 

Each class has one prototype object, with one set of properties. But there are 
potentially many instances of a class, each of which inherits those prototype 
properties. Because one prototype property can be inherited by many objects, 



^ Chapter S: Objects 

JavaScript must enforce a fundamental asymmetry between reading and writing 
property values. When you read property p of an object o, JavaScript first checks 
to see if o has a property named p. If it does not, it next checks to see if the pn> 
totype object of o has a property named p. This is what makes prototype-based 
inheritance work. 

When you write the value of a property, on the other hand, JavaScript does not 
use the prototype object. To see why, consider what would happen if it did: sup- 
pose you try to set the value of the property o . p when the object o does not have 
a property named p. Further suppose that JavaScript goes ahead and looks up the 
property p in the prototype object of o and allows you to set the property of the 
prototype. Now you have changed the value of p for a whole class of objects- 
not at all what you intended. 

Therefore property inheritance occurs only when you read property values, not 
when you write them. If you set the property p in an object o that inherits that 
property from its prototype, what happens is that you create a new property p 
directly in o Now that o has its own property named p, it no longer inherits the 
value of p from its prototype. When you read the value of p, JavaScript first looks 
at the properties of o. Since it finds p defined in o, it doesn't need to search the 
prototype object and never finds the value of p defined there. We sometimes say 
that the property p in o "shadows" or "hides" the property p in the prototype 
object. Prototype inheritance can be a confusing topic. Figure 8-1 illustrates the 
concepts we've discussed here. 

Because prototype properties are shared by all objects of a class, it generally 
makes sense to use them only to define properties that are the same for all objects 
within the class. This makes prototypes ideal for defining methods. Other 
properties with constant values (such as mathematical constants) are also suitable 
for definition with prototype properties. If your class defines a property with a 
very commonly used default value; you might define this property and its default 
value in a prototype object Then, the few objects that want to deviate from the 
default value can create their own private, unshared copies of the property and 
define their own non-default values. 

Let's move from an abstract discussion of prototype inheritance to a concrete 
example Suppose we define a CircleO constructor function to create objects 
that represent circles. The prototype object for this class is Ci rcl e . prototype, so 
we can define a constant available to all'Circle objects like this: 

Circle. prototype. pi = 3.14159; 
The prototype object of a constructor is created automatically by JavaScript. In 
most versions of JavaScript, every function is automatically given an empty proto- 
type object, just in case it is used as a constructor. In Navigator 3, however, the 



ftototypes andjnherttarice_ 



135 




prototype object is not created until the function is used as a constructor for the 
first time. What this means is that for compatibility with Navigator 3, you should 
create at least one object of a class before you use the prototype object to assign 
methods and constants to objects of that class. So, if we have defined a Ci rcl e( ) 
constructor, but not yet used it to create any Circle objects, we'd define the con- 
stant property pi like this: 

// First create and discard a dummy Circle object. 

// This forces Navigator 3 to create the prototype object. 



// Now we can set properties in the prototype. 
Circle. prototype. pi = 3.14159; 

Example 8-4 shows our Circle example fully fleshed out. The code defines a Ci r- 
cle class by first defining a Circlet) constructor to initialize each individual 
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object, and then by setting properties of Ci rcl e . prototype to define methods 
and constants shared by all instances of the class. 
Example 8-4: Defining a Circle Class with a Prototype Object 

II Define a constructor method for our class. 

// Use it to initialize properties that will be different for 

// each individual circle object. 

function CircleU, y, r> 

{ 

this.x = x; // The X ■ coordi nate of the center of the circle 
this.y = y; // The Y-coordinate of the center of the circle 
this.r = r; // The radius of the circle 



// Create and discard en initial Circle object. 

// This forces the prototype object to be created in Navigator 3. 

new CircleC0,0,O); 

// Define a constant: a property that will be shared by 
// all circle objects. Actually, we could just use Math. PI, 
// but we do it this way for the sake of example. 
Circle. prototype. pi = 3.14159; 

// Define a method to compute the circumference of the circle. 

// First declare a function, then assign it to a prototype property. 

// Note the use of the constant defined above. 

function Ci'rcle_circumference<) { return 2 * thi s .pi * thi s . r; } 

Circle. prototype. circumference = Circle_ci rcumference; 

// Define another method. This time we use the FunctionO 

// constructor to define the function and assign it to a prototype 

// property all in one step. 

Ci rcle. prototype. area = new Function( "return this. pi * this.r * this.r;"); 
// The Circle class is defined. 

// Now we can create an instance and invoke its methods. 

var c = new CircletO.O, 0.0, 1.0); ( 

var a = c.areaO; 

var p = c.ci rcumference( ) ; 

8.4.1 Prototypes and Built-in Classes 

It is not only user-defined classes that have prototype objects. Built-in classes, such 
as String and Date, have prototype objects too, and you can assign values to them. 
(This does not work in IE 3, however). 
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fllfef^ample, the following code defines a new method that is available for all 
illlkng objects: 

jfe // Returns true if the last character is c 
P;C-, String. prototype. endsWith = function(c) { 
P ' return (c = thi s . charAU thi s . 1 ength - 1 ) ) 

; Hi* ' : 

|. Saving denned the new endsWithC ) method in the String prototype object, we 
? can use it like this: 

i' .;■ . var message = "hello world"; 

,,. ' message. endsNithCtr) // Returns fals.e 

message, endsWithrd' ) // Returns true 

#5 Object-Oriented JavaScript 

Although JavaScript supports a data type we call an object, it does not have a for- 
mal notion of a class. This makes it quite different from classic object-oriented lan- 
guages such as C++ and Java. The common conception about object-oriented 
programming languages is that they are strongly typed and support class-based 
inheritance. By these criteria, it is easy to dismiss JavaScript as not being a true 
object-oriented language. On the other hand, we've seen that JavaScript certainly 
makes heavy use of objects, and we've seen^hat it has its own type of prototype- 
based inheritance. The truth is that JavaScript is a true object-oriented language, ft 
draws inspiration from a number of other (relatively obscure) object-oriented lan- 
guages that use prototype-based inheritance instead of class-based inheritance. 
Although JavaScript is not a class-based object-oriented language, it does a good 
job of simulating the features of class-based languages like Java and C++. I've 
been using the term class informally throughout this chapter. This section more 
formally explores the parallels between JavaScript and true class-based inheritance 
languages like Java and C++. 

Let's start by defining some basic terminology. An object, as we've already seen, is 
a data structure that contains various pieces of named data and may also contain 
various methods to operate on those pieces of data. An object groups related data 
values and methods into a single convenient package, which generally makes pro- 
gramming easier by increasing the modularity and reusability of code. Objects in 
JavaScript may have any number of properties, and properties may be added to an 
object dynamically. This is not the case in strictly typed languages like Java and 
C++. In those languages, each object has a predefined set of properties (or fields, 
as they are often called), where each property is of a predefined type. When we 
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Outside the loop we initialize a variable t that stores the time interval in seconds as a value:of type 
float. We will use this in our calculations for the image position and velocity. We also define a 
constant g, and initialize the acceleration, a, and the velocity v, of the image. Within the loop we just 
apply the calculations that we discussed earlier. 

The image is compressed when the y coordinate, imageY, is positive. This is because the top of the 
applet is where y is 0, and the bottom of the applet is where y is imageHeight, so when the top-left 
■ corner of the image is below the top of the applet, it is being squashed. In this case, if the image is still 
■- heading downwards, we apply an acceleration in the opposite direction that is the value of the 
expression -10 . OOOf *g*imageY/imageHeight. This expression is arbitrary, but it has the effect of 
slowing the image down more and more as it is compressed. When imageY is negative, the image is off 
: die ground so we set the acceleration back to g. 

Uplaying the Image 

e image is displayed by the ImagePanel object, so we need to implement the paint ( ) method for 
:s class to display the image normally when imageY is zero or negative, and deal with squashing the 
mage when imageY is positive. This is going to be easy since we can use the drawlmage ( ) method 
reused in the previous example to draw the image normally, and use an overloaded version that is 
Specifically intended for scaling an image on the fly to fit a particular area. The overloaded method has 
flie following arguments: 



n you call this method, the image is scaled on the fly to fit the destination area specified by the 
ments. Since you specify the coordinates of the top-left of the image, as well as its width and height, 
s possible to use this method to display part of an image, and fit it to the destination space that you 
'. Like all the drawlmage ( ) methods, this method can draw part of an image when loading of 
age is not complete. In this case the method returns false. The ImageObserver that is passed 
e. last-argument - usually the applet itself - is notified when more of the image becomes available, 
the result that the image is repainted. When the entire image has been drawn, the drawlmage { ) 
3>od returns true. 

jpjuld also be useful to color the background with a color that contrasts with the image. With this in 
we can implement the paint ( ) method for the ImagePanel class as: 



public void paint (Graphics g) 



* gaD.setPaititTcSlor 'liglrtGrai ) 



' A A *^I1|S|JSS^' / ' i ^ gSWl£ith -Weight) ; , /, ^ ^ 

; <--\^^>2D ^wlfe^fi-Mage, imagex, ImageYr this); // ^ 



/A or sc 

. . - v . ■ ■ -. ■ ■ >• / ' "P&^s 

• 0. (1, imagewidrh. i.nageJS-.iqh! " // Ifriacie" 

this).,: . " - ■ // Image 



^ p f, C mC entit ' e area ° f the a PP iet Wlth the col °r that we set in the 

setPamt ( ) call, Colo, . lightGray. When imageY ls greater than 0, we use the yjl, / 
drawl m age ( ) that scales the image on the fly to fit the are! available, from the lll^Z ? 
bottom of the applet at the y coordinate, imageHeight. 3 P ° Sib 

It is worth noting that a jPanel object is double-buffered by default. This means that all IPn H 
a new image that is to be displayed is done in a buffer in memory, and only when il &i 
the pixels for the entire picture written to the screen. Since the existing imL tZTT 5 
altered while the new image ,s being created, this eliminates the flickef nd fla h f"* T ^« 
your display buffer is updated incrementally while it is displayed. g ^ 

If you have put together all the bits of code we have discussed, you should have a workin, applet 

Transforming Images 

We have already seen back in Chapter 15 that we can apply a transformation to a graphics eonti 
modify the user coordinate system relative to the device coordinate system. The tranlorma ion! 

ansla lonj a rota t a , ing a >h ^ ^ ^ £ a 1 oTS 

such a transformation applies to images that you draw as well as anything else. 

In our previous example we adjusted the size of the applet to accommodate the ima ff e In mam ^* 
situations you would not want to do this. Typically, there are likely to be all kinds of hings on ' 
page so you would want your applet to keep within the space allotted to it. We couW havf done 
scahng the image to fit the space available. Rather than go over the old ground let's creX a net 
to try this out and to add a bit of spice this time we will spin the image aVout to ^ cent tte 
dropping it. That way we will get to use a more complicated transform 



EEXESB 



to ™£Sf Z T an u ammatl0n * at SpinS the ima ^ e about its center P° int - We will th £ 
of ttt I t f g W ° ^ ^ WithiD b ° th the hei ^ ht and width applet if we . 

of it as xt rotates. We also want the scaled image to fit in the center of the applet, so we will ti 
user space after we have applied the scale transform. ?P 
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Hs applet ck, will co„..in .h= - methodi » J. P^f^^^f^rw.U »1» h.ve 

ipleraentation of the paint ( ) method. 

fere's the applet class with its data members and the init ( ) method, 
irt java awt *, , % 

^ J>£Ta 2 ill v, '< ^ ?*jt s >;yftt§ ^ _ 

loaded 





nethod is called when the applet 
Did initO 



tracker = ne 
Image image 



v MediaTr acker (this) ; 
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I Image from a fi 
nage = getlmage(n 



catch (MalformedURLException e 
^ System. out. println ( "Failed ■ 
tracker . addlmage ( image , 0 ) ■ 



specified by a URL 
> URL IgetCodeBaseO, "Images Zwrox_logo.gif , ) 



tracker , wai tForAll ( ) ; 
if (tracker. isErrorAny ( ) ) 



// Wait for image to load 
// If there is an error 
// give up 

// Get applet s%e,^ 
/AiGet image y' 
If and its hea 



Dimension size = get£ize() 



imagePanel = new Image Pane 1 ( image) ; 
^ getContentPane ( ) . add (imagePanel ) ; 

catch (InterruptedException e) 

System. out. println(e) ; 

} 

MediaTracker tracker,- ' *™™ sis ™™ fis ™« 

ImagePanel imagePanel- 

sa^MB^lSEilE 11 ' imageHeight - 

""""^ 



// Create panel showing the image 
// Add the panel to the content^ 



Tia xnnut; luc Una 



Fat tU'oS' SnSIt 
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The unshaded code is exactly the same as in the previous method. The M f ineTransf arm member, 
at stores a transform that scales and translates the image. The angle member wdl store the rota ion 
LVe in -dians that will be calculated in the run ( ) method for the whirler thread and applied m 
&e paint ( ) method for the imagePanel object. We have made this is a member of the class rather 
I Sl n P dedare it as a local variable in the run ( } method so we can pick up the value when the applet is 
I l p ped and restarted. The other fields that follow angle are all concerned with onentmg and drawmg 
i: the image. 

' The constant, INTERVAL, stores the time interval between one mstance of drawmg the image and the 
We sto e the time for a complete rotation of the image through 360 degrees, winch u 2n radian,, 
CoTATIONTIME. The variable "sTEPS.PER.ROTATION holds the number of steps foracompkte 
Ctalion so with the values we have set for the previous two variables, this will be 40. Finally, the 
' t anable, s tepCount, will accumulate the total number of steps modulo STEPS_PER ROTATION. The 
Wmo* to start and stop the animation thread are the same as in the previous example, apart from the 
1 new names for the thread and the control variable: 



// This method is called when the brow: 
public void start () 

if (tracker. isErrorAnyt } ) 



: starts the applet 



// If any image errt.- 
// don't create the thread 

\ . VV^ank S-tsfrt' it. 



// This method is called when the browser 
// when is it not visible for example 
public void stopO 



-. to stop the applet 



• // stop the animation loop 
/ / f Diwas d tfie^ thread , 



■ The thread code itself will be very similar to the previous example - the timing mechanism is exactly 
pslme We now need to increment the rotation angle in each time interval so it wr.l be much simpler: 

\jt II This method i 

% public void run ( 



{ 



long time 



s called when the 
- System. currentTimeMilli 



a thread is started 

// Starting time 



// Move image while whirling is. 
{ 

imagePanel . repaint ( ) ,- 

// Wait until the end of the : 
try 



mm 



II Increment the tn 



Sle + roS^tL^%tep%ou^iA-STFT^m_RO^Tiq»^^ ^ , T 
' -tepCount »- STSPS_PJSR_R©TATiO£, , - " 

Thread sleep (Math max (0 time - System currentTimeMillis O ) ) 



879 



catch {InterruptedExceptii 
{ 



The stepCount variable starts at 0 and is incremented by 1 on each iteration of the loop. Since ■ 
complete rotation through 2 radians should occur after STEPS_PER_ROTATION steps, after steB 
steps the rotation angle is the result of the expression - 3 j 
2 . 0*Math. PI* stepCount /STEPS_PER_ROTATTON. In the statement calculating the rotatioil 
we also increment stepCount using the postfix increment operator. The image returns to its orf 
position after STEPS_PER_ROTATION steps, so we maintain the value of stepCount modulp"! 
STEPS_PER_ROTATION. 

The last bit we need to complete the applet is the ImagePanel class, and this only differs fr^jfl 
previous example in the implementation of the paint ( ) method: 

class ImagePanel extends JPanel 
{ 

public ImagePanel ( Image image) 
{ 

this. image = image; 

} 

public void paint (Graphics g) 
{ 

Graphics2D g2D = (Graphics2D) g; 
, ^2D£tpangior^a,(at) t v i . ' I ' ■ „_ ' v / 

g2D . setPaint (Color . lightGray) ; 
g2D. fillRect (0, 0, imageWidth, imageHeight ) ; 

; 1 f, G3Plx°<£QM&>^& xmag&Widrhf^Oj ^agcHe 1 gfoi^'Q) ' ff # 

^^^^^^^^^^^^^^^^^^^^^■^ 

} 

Image image ; 

That's the complete applet so give it a whirl. It would be a good idea to make the & 
larger in the html file - 200x200 say - then you can see the image more clearly. Th 
larger applet is that it will take more processor time since there are more pixels to jij 



The basic principles are the same as in the previous example. The thread code u 
repaints the imagePanel object every interval milliseconds. The while 1< 
increments angle each time, and angle defines the rotation transformation th< 
paint ( ) method for the imagePanel object 
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■the rotation with the statement: 

i at e<angle, imageWidth/2 . 0 , imageHeight/2 .0) ; // Rotate about cents, 

*7 , on specified by this version of the rotate C > method is concatenated with the existing 
formation specified oy ™ s A f fineTransf orm object that we create m the 

• oint. Ttas rotation is about the center of the ,mage. 



Timers 

to adopted , do-it-your.e ,f approach to ^^^^^SSSL more 
,«=o^S 

classes are defined in the java .util package. The T*me das g repeat edly 
"rTask object runs in a separate thread. 

"d:„^ 

^r?^^^^^^-— ----- 

■r and TimerTask combination of classes provide a way of executing repeated tasks that is 
I** after a fixed delay We will start by looking at how you use a Txmer object to 

mer Objects t .„ , , r , 

*K i T,- m(Br obiect to schedule several different tasks, where each task will be defined 

* schedule multiple tasks they will eacn execute in * sc H , Mn j„ arrn rHine- to the 

to allow large numbers of tasks to be executed concurrently - thousands, according 
documentation - without creating undue task scheduling overhead. 

* rtn« for Timer objects The default constructor simply defines a Timer object 
. There are two constructors tor Timer oDjecu,. daemon thread is 

=/rr.r^ 

' For Instance, the following statement creates a Timer object with a daemon thread. 



Tasiiei -felofck -. new Timer itruel a c 



Timer • 
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